<div class="login-form">
  <nz-alert nzType="success" [nzMessage]="loginSuccessText" nzShowIcon
            [style.display]="loginSuccessTip?'':'none'"></nz-alert>
  <nz-alert nzType="error" [nzMessage]="loginErrorText" nzShowIcon [style.display]="loginErrorTip?'':'none'"></nz-alert>
  <br>
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-control>
        <nz-input-group [nzPrefix]="prefixUser">
          <input type="text" nz-input formControlName="username" placeholder="账号" (keyup)="inputChange()">
        </nz-input-group>
        <nz-form-explain *ngIf="validateForm.get('username').dirty && validateForm.get('username').errors">请输入账号
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <nz-input-group [nzPrefix]="prefixLock">
          <input type="password" nz-input formControlName="password" placeholder="密码" (keyup)="inputChange()">
        </nz-input-group>
        <nz-form-explain *ngIf="validateForm.get('password').dirty && validateForm.get('password').errors">请输入密码
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-control>
        <label nz-checkbox formControlName="remember">
          <span>记住账号</span>
        </label>
        <a class="login-form-forgot" class="login-form-forgot">忘记密码</a>
        <button nz-button class="login-form-button" [nzType]="'primary'" [nzLoading]="isLoginBtnLoading">登录</button>
        <a routerLink="/registry">注册账号</a>
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #prefixUser><i nz-icon type="user"></i></ng-template>
  <ng-template #prefixLock><i nz-icon type="lock"></i></ng-template>
</div>
